const scoreDisplay = document.getElementById("score-display")
const questionDisplay = document.getElementById("question-display")

const questions = [
  {
    quiz: ["value", "estimate", "evaluate"],
    options: ["jury", "assess"],
    correct: 2,
  },
  {
    quiz: ["close", "near", "next"],
    options: ["trace", "adjacent"],
    correct: 2,
  },
  {
    quiz: ["foreign", "national", "ethnic"],
    options: ["mad", "exotic"],
    correct: 2,
  },
  {
    quiz: ["assume", "insight", "weather"],
    options: ["forecast", "sustainable"],
    correct: 1,
  },
  {
    quiz: ["fast", "quick", "prompt"],
    options: ["charity", "rapid"],
    correct: 2,
  },
]

let score = 0
scoreDisplay.textContent = score
let clicked = []

function populateQuestions() {
  questions.forEach((question) => {
    const questionBox = document.createElement("div")
    questionBox.classList.add("question-box")

    //添加一个图标
    const logoDisplay = document.createElement("h1")
    logoDisplay.textContent = "✒"
    questionBox.append(logoDisplay)

    //展示提示词
    question.quiz.forEach((tip) => {
      const tipText = document.createElement("p")
      tipText.textContent = tip
      questionBox.append(tipText)
    })

    const questionButtons = document.createElement("div")
    questionButtons.classList.add("question-buttons")
    questionBox.append(questionButtons)

    //添加选项按钮
    question.options.forEach((option, optionIndex) => {
      const questionButton = document.createElement("button")
      questionButton.classList.add("question-button")
      questionButton.textContent = option

      questionButton.addEventListener("click", () =>
        checkAnswer(
          answerDisplay,
          questionButton,
          option,
          optionIndex + 1,
          question.correct
        )
      )

      questionButtons.append(questionButton)
    })

    //添加判断正误框
    const answerDisplay = document.createElement("div")
    answerDisplay.classList.add("answer-display")

    questionBox.append(answerDisplay)

    questionDisplay.append(questionBox)
  })
}

populateQuestions()

function checkAnswer(
  questionBox,
  questionButton,
  option,
  optionIndex,
  correctAnswer
) {
  if (optionIndex === correctAnswer) {
    score++
    scoreDisplay.textContent = score
    addResult(questionBox, "Correct!", "correct")
  } else {
    score--
    scoreDisplay.textContent = score
    addResult(questionBox, "Wrong!", "wrong")
  }
  clicked.push(option)
  questionButton.disabled = clicked.includes(option)
}

function addResult(answerDisplay, answer, className) {
  answerDisplay.classList.remove("wrong")
  answerDisplay.classList.remove("correct")
  answerDisplay.classList.add(className)
  answerDisplay.textContent = answer
}
